<template>
  <div>
    <div>
      <el-tabs type="border-card">
        <!--<el-tab-pane label="买手邀请链接">-->
          <!--<p style="margin-bottom: 10px;">复制您的买手获利符专用邀请链接，邀请好友成功注册获利符账号之后，好友做任务您可以获得邀请奖励</p>-->
          <!--<div>-->
            <!--<p class="p1">http://vip.huolifu.com/user/register/275306/9ec325d5de69435d132ee08a71437337</p>-->
            <!--<el-button type="primary" size="mini" style="line-height: 16px; margin-top: 4px; margin-left: 15px;">复制</el-button>-->
          <!--</div>-->
        <!--</el-tab-pane>-->
        <el-tab-pane label="商家邀请链接">
          <p style="margin-bottom: 10px;">复制您的商家获利符专用邀请链接，邀请好友成功注册获利符账号之后，好友订购技术服务您可以获得邀请奖励</p>
          <div>
            <p class="p1">http://vip.huolifu.com/user/register/275306/9ec325d5de69435d132ee08a71437337</p>
            <el-button type="primary" size="mini" style="line-height: 16px; margin-top: 4px; margin-left: 15px;">复制</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
      <ul>
        <li style="color: #f00; font-size: 18px;">请注意：</li>
        <li>1：邀请链接只能发布于聊天工具中，如微信，朋友圈，QQ，QQ动态等等，禁止推广于外部网站，如微博，博客，贴吧等等的各大网站，平台会定期核实，如有发现一律邀请链接作废！</li>
        <li>2：邀请好友只能是朋友，亲戚，同事，熟人等等，一律不可向陌生人发送邀请链接，邀请进获利符注册做任务！</li>
      </ul>
      <h3 style="height: 24px;margin-bottom: 5px;padding-top: 15px;line-height: 24px;font-size: 22px;">我的奖励</h3>
      <div class="jl">
        <div class="_left">
          <p>共计获得奖励：0流量点</p>
          <p style="line-height: 24px;padding-left: 40px;">=   邀请奖励：0符点 查看   +   完成任务奖励：0符点</p>
          <p style="line-height: 24px;padding-left: 40px;">共计邀请人员：0人</p>
          <p style="line-height: 24px;padding-left: 40px;">已订购技术服务人数：0人</p>
        </div>
        <div>
          <p>共计获得奖励：0流量点</p>
          <p style="line-height: 24px;padding-left: 40px;">=   邀请奖励：0符点 查看   +   完成任务奖励：0符点</p>
          <p style="line-height: 24px;padding-left: 40px;">共计邀请人员：0人</p>
          <p style="line-height: 24px;padding-left: 40px;">已订购技术服务人数：0人</p>
        </div>
      </div>
      <div class="gz">
        <h3 style="height: 24px; margin-bottom: 5px; padding-top: 15px; line-height: 24px; font-size: 22px;">邀请奖励</h3>
        <table class="t1">
          <thead>
            <tr>
              <td colspan="6">
                邀请商家首次订购技术服务，可获得以下奖励"
              </td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td style="padding: 15px 0;border: 1px solid #dcdcdc;text-align: center;line-height: 26px;">
                邀请商家首次订购技术服务
              </td>
              <td>
                3个月奖励：<br/>
                750.00流量点
              </td>
              <td>
                6个月奖励：<br/>
                750.00流量点
              </td>
              <td>
                12个月奖励：<br/>
                750.00流量点
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "AdminTj"
  }
</script>

<style scoped>
p{
  margin: 0;
}
  .p1{width: 620px;
    height: 40px;
    padding-left: 10px;
    border: 1px solid #8074C5;
    line-height: 40px;
    font-size: 14px;
    color: #252020;
    font-weight: bold;
    float: left;
  }
ul{
  padding: 0 0 20px;
  margin-top: 20px;
  line-height: 22px;
  font-size: 10px;
  border-bottom: 1px solid #dcdcdc;
}
ul li{
  list-style:none;
}
.jl{
  display: flex;
  align-items: center;
  width: 808px;
  margin: 30px 0 20px 50px;
  padding: 20px 0 20px 30px;
  background: #F2F1F9;
}
  .t1{
    width: 100%;
    margin-bottom: 20px;
    border: 1px solid #dcdcdc;
    font-size: 14px;
    margin-top: 30px;
  }
  ._left{
    margin-right: 20px;
    padding-right: 20px;
    border-right: 1px solid #999;
    width: 400px;
    overflow: hidden;
  }
  .gz{
    width: 790px;
    padding-bottom: 20px;
    border-top: 1px solid #DDD;
    border-bottom: 1px solid #DDD;
  }
  .t1 td{
    height: 50px;
    padding-left: 20px;
    line-height: 50px;
    background: #FAF7FD;
    border-bottom: 1px solid #dcdcdc;
  }
</style>
